import React, { useState } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import { axconst } from '@/shared/axconst';
import { Col, Row, Dropdown, Menu, Icon, Button, Drawer, Input } from 'antd';
import Search from './components/search';
import { AxTable } from '@/components/AxList';

const { Search: SimpleSearch } = Input;
const Index: React.FC<any> = props => {
  const [drawerVisible, setDrawerVisible] = useState(false);
  /** 配置列 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'orgName11',
      width: axconst.width.longx,
    },
    {
      title: '事件名称',
      dataIndex: 'orgName2',
      width: axconst.width.long,
    },
    {
      title: '创建人',
      dataIndex: 'orgName3',
      width: axconst.width.six,
    },
    {
      title: '创建时间',
      dataIndex: 'orgName4',
      width: axconst.width.long,
    },
    {
      title: '流程节点',
      dataIndex: 'orgName5',
      width: axconst.width.fouronly,
    },
    {
      title: '状态',
      dataIndex: 'orgName7',
      width: axconst.width.fouronly,
    },
    {
      title: '操作',
      dataIndex: 'orgName8',
      width: axconst.width.operate8,
    },
  ];

  const data = {
    list: [
      {
        id: 0,
        orgName0: '浓硫酸',
        orgName1: '那是一种内在的东西， 他们到达不了，也无法触及的',
        orgName2: '产品规格：AR',
        orgName3: '别名：醋酸;冰醋酸',
        orgName4: '￥8.20',
        orgName5: '库存：9000',
        orgName6: '管控：非管控',
        orgName7: '包装:1瓶',
        orgName8: '性状：固体',
        orgName9: '销量：0',
        orgName10: '分类编码：1093859-61-0',
        orgName11: '0',
      },
      {
        id: 1,
        orgName0: '2',
        orgName1: '2',
        orgName2: '甘油',
        orgName3: '7681-52-9',
        orgName4: '固体',
        orgName5: 'g',
        orgName6: '1000000',
        orgName7: '1',
        orgName8: '通过审核',
        orgName9: '1',
        orgName10: '1',
        orgName11: '1',
      },
    ],
  };

  return (
    <>
      <AxCard
        style={{ minHeight: document.body.clientHeight - 95 - 46 - 24 - 24 }}
        bodyStyle={{ padding: 0 }}
      >
        <AxCard
          style={{ paddingTop: 16, paddingBottom: 16 }}
          bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
        >
          <Row>
            <Col span={4}>
              <SimpleSearch placeholder="搜索" onSearch={(val: any) => {}} allowClear />
            </Col>
            <Col span={16}></Col>
            <Col span={4} style={{ textAlign: 'right' }}>
              <Dropdown
                trigger={['click']}
                overlay={
                  <Menu>
                    <Menu.Item key={1}>
                      <Icon type="plus-circle" />
                      &nbsp;未处理
                    </Menu.Item>
                    <Menu.Item key={2}>
                      <Icon type="minus-circle" />
                      &nbsp;已处理
                    </Menu.Item>
                  </Menu>
                }
              >
                <Button size="default" type="ghost">
                  <Icon type="filter" />
                  &nbsp;更多操作&nbsp;
                  <Icon type="down" />
                </Button>
              </Dropdown>
              <Button
                type="link"
                icon="unordered-list"
                style={{ fontSize: 20 }}
                onClick={() => setDrawerVisible(true)}
              />
            </Col>
          </Row>
        </AxCard>
        <AxCard bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}>
          <AxTable
            // resizable
            size="default"
            bordered={false}
            columns={columns}
            // checkboxFixed={false}
            // addemptycolumn={true}
            data={data}
          />
        </AxCard>
        <Drawer
          title="条件筛选"
          placement="right"
          maskStyle={{ opacity: 0, animation: 'none' }}
          closable={true}
          onClose={() => setDrawerVisible(false)}
          visible={drawerVisible}
          getContainer={false}
          style={{ position: 'absolute' }}
        >
          {drawerVisible && <Search visible={drawerVisible} />}
        </Drawer>
      </AxCard>
    </>
  );
};

export default Index;
